<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Yun City</title>
    <link type="text/css" rel="stylesheet" href="./plugin/bootstrap-3.3.7/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="./plugin/toastr/toastr.min.css">
    <link type="text/css" rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div id="init" class="hide">
        <div class="divs-wrap">
            <div>
                <img id="IE" width="160" height="160" src="./img/IE.png">
            </div>
            <div class="ps-wrap">
                <p>插件安装提示</p>
                <p>首次进入需要安装插件，请下载安装！</p>
                <p>插件安装完成后，请重启IE浏览器</p>
            </div>
        </div>
        <div class="btns-wrap">
            <p class="btn-login">下载安装</p>
        </div>
    </div>
    <div id="login" class="hide">
        <div class="login-typing">
            <input type="text" class="mobile" placeholder="输入用户名" id="username">
            <input type="text" class="mobile" placeholder="服务器地址" id="server" value="121.196.223.124:9600">
        </div>
        <div class="btns-wrap">
            <p class="btn-login" onclick="App.login()">登录</p>
            <!-- <p class="btn-register" onclick="App.register()">注册</p> -->
        </div>
    </div>
    <div id="home" class="hide">
        <div id="header">
            <div class="product-wrap">
                <span class="product-name">Yun City</span>
                <span class="resolution-label">分辨率：</span>
                <select id="resolution" class="resolution" onchange="App.switch_resolution(this)">
                    <option value="320x240">自动</option>
                    <option value="1280x720">超清(1280x720)</option>
                    <option value="640x480">高清(640x480)</option>
                    <option value="480x320">标清(480*320)</option>
                    <option value="320x240">普清(320*240)</option>
                </select>
                <span class="resolution-label">摄像头：</span>
                <select id="camera-list" class="resolution" onchange="App.switch_camera(this)">
                    <option value="0">自动</option>
                </select>
            </div>
            <div class="user-wrap">
                <ul class="nav-user">
                    <li>
                        <a id="userid" class="text-only"></a>
                    </li>
                    <li>
                        <a href="javascript:;" onclick="App.logout()">退出</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="user"></div>
        <div id="main">
            <div class="title">双向视频</div>
            <div id="enter-room">
                <i class="icon-accept" onclick="App.enter_room()"></i>
                <input type="text" class="mobile" placeholder="输入房间号" id="roomid" value="">
            </div>
            <div id="video-area" class="hide">
                <div id="LocalVideo"></div>
                <div id="tool">
                    <a id="switch-audio" href="javascript:App.switch_audio();" class="on">音频</a>
                    <a id="switch-video" href="javascript:App.switch_video();" class="on">视频</a>
                    <a id="hangup" href="javascript:App.hangup();">挂断</a>
                    <a id="snapcapture" href="javascript:App.snap_capture();">截屏</a>
                    <a id="record" class="" href="javascript:App.video_record();">录制</a>
                    <a id="upload" href="javascript:App.file_upload();">上传</a>
                </div>
            </div>
            <div id="im-area" class="hide">
                <div id="message"></div>
                <div id="typing">
                    <input id="msg_input" type="text" class="input-element" placeholder="输入你想要回复的内容">
                    <span onclick="App.sendMsg()">发送</span>
                </div>
            </div>
        </div>
        <div id="media">
            <div class="title">录制</div>
            <ul id="record-video-list" class="record-list-wrap">
                <li class="video-placeholder">
                    <div class="item-video">
                    </div>
                </li>
            </ul>
            <div id="video-progress" class="progress hide">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                  0%
                </div>
            </div>
            <div class="title">截图</div>
            <ul id="snapcapture-list" class="snapshot-list-wrap empty">
                <li class="snapshot-placeholder">
                    <div class="item-snapshot">
                    </div>
                </li>
            </ul>
            <div id="image-progress" class="progress hide">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                  0%
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./plugin/jquery-1.12.4.min.js"></script>
<script src="./plugin/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="./plugin/toastr/toastr.min.js"></script>
<script src="./plugin/is.min.js"></script>
<script src="./js/YunSDKDefine.js"></script>
<script src="./js/YunErrorCode.js"></script>
<script src="./js/YunSDKEvent.js"></script>
<script src="./js/YunMediaSDK.js"></script>
<script src="./js/main.js"></script>
</html>